<template>
    <el-row class="myCreateOrdertrow1" type="flex" justify="center" 
    style="margin-top:50px">
        <el-col :span="6" class="myCreateOrdercol1">
            <div class="myCreateOrdercol1icondiv">
                <img class="myCreateOrdercol1icon" src="../../assets/icon/completed.png"
                style="cursor: pointer;"
                @mouseover="MouseOverChangeGoCartStyle"
                @mouseleave="MouseLeaveChangeGoCartStyle"
                @click="GotoCartBtn">
            </div>
            <div class="myCreateOrdercol1textdiv">
                <span :style="ChangeGoCartText" 
                @mouseover="MouseOverChangeGoCartStyle"
                @mouseleave="MouseLeaveChangeGoCartStyle"
                @click="GotoCartBtn">查看购物车</span>
            </div>
        </el-col>
        <el-col :span="3" class="myCreateOrdercol1">
            <div class="myCreateOrdercol1icondiv">
                <img class="myCreateOrdercol1icon2" src="../../assets/icon/turnright.png">
            </div>
        </el-col>
        <el-col :span="6" class="myCreateOrdercol1">
            <div class="myCreateOrdercol1icondiv">
                <img class="myCreateOrdercol1icon" src="../../assets/icon/in_progress.png"
                style="cursor: pointer;">
            </div>
            <div class="myCreateOrdercol1textdiv" >
                <span style="cursor: pointer;">确认订单信息</span>
            </div>
        </el-col>
        <el-col :span="3" class="myCreateOrdercol1">
            <div class="myCreateOrdercol1icondiv">
                <img class="myCreateOrdercol1icon2" src="../../assets/icon/turnright.png">
            </div>
        </el-col>
        <el-col :span="6" class="myCreateOrdercol1">
            <div class="myCreateOrdercol1icondiv">
                <img class="myCreateOrdercol1icon" src="../../assets/icon/incompleted.png">
            </div>
            <div class="myCreateOrdercol1textdiv" style="color: rgb(170, 170, 170);">
                <span>成功提交订单</span>
            </div>
        </el-col>
    </el-row>
</template>

<script>
export default {
    name:'XiaoCOSteps',
    data(){
        return{
            ChangeGoCartText:{cursor: "pointer"},
            BacktoPhoneCart:false,
        }
    },
    methods:{
        MouseOverChangeGoCartStyle(){
            this.ChangeGoCartText={
                cursor: "pointer",
                color:"rgb(202,202,202)",
            }
        },
        MouseLeaveChangeGoCartStyle(){
            this.ChangeGoCartText={
                cursor: "pointer",
            }
        },
        GotoCartBtn(){
            this.$confirm('您要返回购物车页面重新选购吗？', '确认信息', {
            distinguishCancelAndClose: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消'
            })
            .then(() => {
                if(this.BacktoPhoneCart==false){
                    this.$router.push({name:'xCart'})
                }else if(this.BacktoPhoneCart == true){
                    this.$router.push({name:'PxCart'})
                }
            })
            .catch(() => {});
        }
    },
    mounted(){
        this.$bus.$on('PxCart',(value)=>{
            this.BacktoPhoneCart=value
        })
    },
    beforeDestroy(){
        this.$bus.$off('PxCart')
    },
}
</script>

<style scoped>
.myCreateOrdertrow1{
    height: 100%;
    margin: 0 auto;
    /* border: 1px solid rgb(235, 235, 235); */
    max-width: 650px;
}
.myCreateOrdercol1{
    height: 80px;
    font-size: 16px;
}
.myCreateOrdercol1icondiv{
    margin-top: 9px;
    text-align: center;
}
.myCreateOrdercol1icon{
    height: 40px;
    width: 40px;
}
.myCreateOrdercol1icon2{
    margin-top: 10px;
    height: 40px;
    width: 55px;
}
.myCreateOrdercol1textdiv{
    margin-top: 1px;
    text-align: center;
}
</style>